import { Button, Input, Space } from "antd"
import type { InputRef } from "antd"
import { Ref, useImperativeHandle, useRef } from "react"

// ref 通过第二个参数传入使用
const InputWrap = ({ domRef }: { domRef: Ref<InputRef> }) => {
  // 子组件内部的 ref
  const inputRef = useRef<InputRef>(null)
  // 将传入的 domRef 作为 prop 与 inputRef.current 绑定
  useImperativeHandle(domRef, () => inputRef.current!, [])
  return (
    <Input
      ref={inputRef}
      value='点击按钮聚焦'
      style={{ width: 200 }}
    />
  )
}

const ImpreativeHandleDemo = () => {
  const domRef = useRef<InputRef>(null)
  const handleClick = () => {
    domRef.current?.focus()
  }
  return (
    <>
      <h3>--hook获取子组件dom</h3>
      <Space>
        <InputWrap domRef={domRef} />
        <Button onClick={handleClick} type="primary">hook获取子组件dom聚焦</Button>
      </Space>
      <ul>
        <li>而更优雅的方式则是使用指令式api - useImpreativeHandle</li>
        <li>这个 hook 实际上就是将一个对象绑定到 ref 对象的 current 属性</li>
      </ul>
    </>
  )
}

export default ImpreativeHandleDemo
